<script setup lang="ts">
</script>

<template>
  <div class="page-main">
    <el-carousel height="500px" motion-blur>
      <el-carousel-item>
        <el-image style="width: 100%;" src="/images/home/swiper-1.webp" fit="contain" loading="lazy" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image style="width: 100%;" src="/images/home/swiper-2.webp" fit="contain" loading="lazy"/>
      </el-carousel-item>
    </el-carousel>
    <div class="page-content">
      <div class="home-card home-sdwan">
        <div class="home-card-content">
          <h1>SD-WAN</h1>
          <span>
          <b>SD-WAN（Software-Defined Wide Area Network，软件定义广域网）</b>是一种新兴的网络技术，它通过软件来控制广域网的连接。SD-WAN技术允许企业通过互联网、MPLS、LTE等多种混合链路进行数据传输，选择最优路径以提供更好的网络体验。
          <br>
          <b>成本效益：</b>SD-WAN通过公网解决物理专线最后一公里的问题，降低了整体链路成本。
          <br>
          <b>部署效率：</b>SD-WAN的部署时间较短，可以快速实现。
          <br>
          <b>灵活性：</b>SD-WAN支持多种上行链路，如5G和有线连接，可以灵活地连接到总部和云服务。
          <br>
          <b>智能选路：</b>SD-WAN通过应用智能选路和优化，保证了办公、生产等地点的关键应用体验。
          <br>
          <b>云计算兼容性：</b>SD-WAN更适合云计算时代，能够灵活地连接各种云资源，如IaaS和SaaS。
        </span>
        </div>
      </div>
      <div class="home-card home-book">
        <div class="home-card-content">
          <h1>SaaS</h1>
          <span>
          <b>SaaS（Software as a Service，软件即服务）</b>平台通过互联网向用户提供软件，通常需要按月订阅。
          <br>
          <b>优势：</b>使用SaaS则无需在任何计算机上安装和运行软件应用程序。
          <br>
          <b>特性：</b>SaaS平台是可通过互联网获得，由第三方提供商托管在远程服务器上。
          <br>
          <b>平台适用情况：</b>SaaS平台非常适合希望应用程序以最少的输入量即可平稳可靠地运行的情况。
        </span>
        </div>
      </div>
      <div class="home-card home-tree">
        <div class="home-card-content">
          <h1>IaaS</h1>
          <span>
          <b>IaaS（Infrastructure as a service，基础设施即服务）</b>业务提供按需付费存储，网络和虚拟化等服务。
          <br>
          <b>交付方式：</b>通过互联网交付。
          <br>
          <b>优势：</b>IaaS具有高度的灵活性和高度的可扩展性，您可以在需要时随时更换它，而不会损失最初的投资。
          <br>
          <b>特性：</b>IaaS平台具有高度灵活和高度可扩展性，可被多个用户访问，性价比高。
          <br>
          <b>平台适用情况：</b>IaaS对于各种形式和规模的企业都是有益的，因为它可以完全控制您的基础架构，并采用按随用随付的模式运行，因此适合大多数预算情况。
        </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page-main {
  display: inline-flex;
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;

  .el-carousel {
    margin-bottom: 16px;
    width: 100%;

    .carousel-item {
      color: #475669;
      opacity: 0.75;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item {
      &:nth-child(2n + 1) {
        background-color: #d3dce6;
      }

      &:nth-child(2n) {
        background-color: #99a9bf;
      }

      h3 {
        color: #475669;
        opacity: 0.75;
        display: flex;
        align-items: center;
        margin: 0;
        text-align: center;
        height: 100%;
      }
    }
  }

  .page-content {
    padding: 20px;

    .home-card {
      display: flex;
      background-size: contain;
      border-radius: 15px;
      box-sizing: border-box;
      margin-bottom: 36px;
      padding: 15px;
      box-shadow: 0 0 10px #9c9c9c;
      width: 100%;
      min-height: 250px;

      &:nth-child(2n + 1) {
        justify-content: right;
      }

      &:nth-child(2n) {
        justify-content: left;
      }

      .home-card-content {
        width: calc(100% - 280px);
        padding: 5px 15px;
      }
    }

    .home-sdwan {
      background: rgba(255, 255, 255, 0.8) url("/images/home/home-1.webp") no-repeat center left;
      background-size: contain;
    }

    .home-book {
      background: rgba(255, 255, 255, 0.8) url("/images/home/home-2.webp") no-repeat center right;
      background-size: contain;
    }

    .home-tree {
      background: rgba(0, 0, 0, 0.5) url("/images/home/home-3.webp") no-repeat center left;
      background-size: contain;
      color: #ffffff;
    }
  }
}
</style>